---
layout: default
is_home: true
---

<script type="text/javascript">
  {% include_relative src/demo/demo-base.js %}
</script>

<div class="cover-body text-center d-flex w-100 xh-100">
  <div class="text-center cover-container container w-100 xh-100 p-3 mx-auto d-flex flex-column">
<!--       <header class="masthead clearfix mb-auto">
      <div class="inner">
        <div class="masthead-brand">              
          <div class="text-mutedx" style="color: #ACB5BD">
            <p>
              Every file deserves to be treated equally
            </p>
          </div>
        </div>
      </div>
    </header> -->

    <main role="main" class="inner cover mb-3">
      <div class="text-left" style="color: #ACB5BD">
        <p>
          Every file deserves to be treated equally
        </p>
      </div>
<!--             <h1 class="cover-heading">Cover your page.</h1>
      <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p> -->
      <div id="demo-basic-wrapper">
        {% capture demo_basic %}
          {% include_relative src/demo/demo-basic.vue %}
        {% endcapture %}
        {% include_relative website/includes/vue-code.md name="demo_basic" code=demo_basic result_only=true %}
      </div>
<!--             <p class="lead">
        <a href="#" class="btn btn-lg btn-secondary">Learn more</a>
      </p> -->
    </main>

    <footer class="mastfoot mt-auto">
      <div class="inner">
      <p class="lead-old">
        <!-- <a href="#" class="btn btn-lg btn-secondary">Get Started</a> -->
         <!-- by <a href="https://twitter.com/safrazik">@safrazik</a>.</p> -->

         <!-- <a href="https://github.com/safrazik/vue-file-agent" class="btn btn-outline-secondary btn-sm">Github</a> -->
         <a href="#features" class="btn btn-outline-secondary btn-sm mb-2">Features</a>
         <a href="#installation" class="btn btn-outline-secondary btn-sm mb-2">Installation</a>
         <a href="#advanced-demo" class="btn btn-outline-secondary btn-sm mb-2">Advanced Demo</a>
         <a href="#community" class="btn btn-outline-secondary btn-sm mb-2">Community</a>
         <a href="{{ "/docs/" | prepend: site.baseurl }}" class="btn btn-outline-secondary btn-sm mb-2">Docs & Examples</a>

      </p>
      <p style="margin-top: -1rem;">
        <a class="btn btn-outline-secondary btn-sm github-button" href="https://github.com/safrazik/vue-file-agent" data-size="large" data-show-count="true" aria-label="Star safrazik/vue-file-agent on GitHub">Star</a>

        <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="btn btn-outline-secondary btn-sm twitter-share-button" data-size="large" data-text="Full featured #vuejs file upload component with multi-file, preview, progress, drag &amp; drop support" data-url="https://safrazik.github.io/vue-file-agent" data-via="safrazik" data-related="safrazik" data-show-count="false">Tweet</a>

<!--         <a href="https://twitter.com/safrazik?ref_src=vfa" class="btn btn-outline-secondary btn-sm twitter-follow-button" data-size="large" data-show-screen-name="false" data-show-count="false">Follow @safrazik</a> -->
      </p>
         <!-- by <a href="https://twitter.com/safrazik">@safrazik</a>.</p> -->
      </div>
    </footer>
  </div>
</div>
<div class="readme-wrapper">
<div class="container">
  <div id="docs" name="docs"></div>
  <div class="markdown-body" style="margin: 40px auto;">
    {{ content }}
  </div>
</div>
</div>
<div class=" advanced-demo-wrapper">
<div class="container">
  <div id="advanced-demo" name="advanced-demo"></div>
  <h2>Advanced Demo</h2>
  <div id="demo-advanced-wrapper">
    {% capture demo_advanced %}
    {% include_relative src/demo/demo-advanced.vue %}
    {% endcapture %}
    {% include_relative website/includes/vue-code.md name="demo_advanced" code=demo_advanced result_only=true %}
  </div>
</div>
</div>
  
<div class="community-wrapper">
<div class="container">
  <div class="row" hidden>
    <div class="col-md-3">
      &nbsp;
    </div>
    <div class="col-md-5">
      <blockquote class="twitter-tweet"><p lang="en" dir="ltr">I&#39;m going to release two big open source projects that I&#39;m working on for 2 years: one for <a href="https://twitter.com/hashtag/vuejs?src=hash&amp;ref_src=twsrc%5Etfw">#vuejs</a> and another for <a href="https://twitter.com/hashtag/php?src=hash&amp;ref_src=twsrc%5Etfw">#php</a> (with <a href="https://twitter.com/hashtag/vuejs?src=hash&amp;ref_src=twsrc%5Etfw">#vuejs</a> support)<br>Stay tuned for updates!</p>&mdash; Safraz Razik (@safrazik) <a href="https://twitter.com/safrazik/status/1173642557470822401?ref_src=twsrc%5Etfw">September 16, 2019</a></blockquote>
    </div>
  </div>


  <h2 class="mt-5 mb-2" id="community">Community</h2>
  <div class="text-muted mb-3">Thank you for your interest and contributions.</div>
  <div>
    <!-- Place this tag where you want the button to render. -->
    <a class="github-button" href="https://github.com/safrazik/vue-file-agent" data-size="large" data-show-count="true" aria-label="Star safrazik/vue-file-agent on GitHub">Star</a>

    <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large" data-text="Full featured #vuejs file upload component with multi-file, preview, progress, drag &amp; drop support" data-url="https://safrazik.github.io/vue-file-agent" data-via="safrazik" data-related="safrazik" data-show-count="false">Tweet</a>
  </div>
  <h3 class="mt-5 mb-2">Activity on
    <a href="https://github.com/safrazik/vue-file-agent">Github</a>
        <!-- <a href="https://twitter.com/safrazik?ref_src=vfa" class="twitter-follow-button" data-size="large" data-show-screen-name="false" data-show-count="false">Follow @safrazik</a> -->
  </h3>

  {% if site.activity_feed %}
    {% include_relative website/includes/activity-feed.html %}
  {% endif %}

<!--         <div class="mb-5">
  </div> -->
</div>
</div>

<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>